<template>
  <div class="content">
    <zj-header
      name="精选电台"
      style="margin: 0 auto"
      path="/hotAnchor"
    ></zj-header>
    <recommend-card
      :recommends="recommends"
      :configObj="configObj"
    ></recommend-card>
    <zj-header
      name="付费精选"
      style="margin-top: 20px"
      path="/payAnchor"
    ></zj-header>
    <pays-card v-for="item in pays" :key="item.id" :item="item"> </pays-card>
    <page-line
      name="电台个性推荐"
      :data="recommend"
      :configRemd="configRemd"
    ></page-line>
    <page-line
      name="创作|翻唱"
      :data="creations"
      :configRemd="configRemd"
      path="/anchor2001"
    ></page-line>
    <page-line
      name="3D|电子"
      :data="electrs"
      :configRemd="configRemd"
      path="/anchor10002"
    ></page-line>
    <page-line
      name="音乐故事"
      :data="musicStory"
      :configRemd="configRemd"
      path="/anchor2"
    ></page-line>
    <page-line
      name="情感调频"
      :data="emotion"
      :configRemd="configRemd"
      path="/anchor3"
    ></page-line>
    <page-line
      name="二次元"
      :data="quadratic"
      :configRemd="configRemd"
      path="/anchor3001"
    ></page-line>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import ZjHeader from '@/base-ui/header'
import CardItem from '@/base-ui/card-item'
import PaysCard from '@/base-ui/card-pays'
import RecommendCard from '../cpns/recommend-card.vue'
import PageLine from '../cpns/page-line.vue'

const props = defineProps<{
  recommends: any
  pays: any
  recommend: any
  creations: any
  electrs: any
  musicStory: any
  emotion: any
  quadratic: any
}>()

const configObj = {
  imgUrl: 'picUrl',
  wth: '23%',
  topShow: false,
  playShow: false
}

const configRemd = {
  imgUrl: 'picUrl',
  wth: '15%',
  topShow: false,
  playShow: false,
  userShow: false
}
</script>

<style scoped lang="less">
.content {
  width: 85%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .slot-text {
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
